<template>
  <view class="pages login">
    <view class="login-title jh-line-height">
      忘记密码
    </view>
    <image class="login-close" :src="ossDomain + '/close.png'" @tap="toLogin()"></image>
    <view class="login-input jh-align-center" style="padding-top: 85rpx;">
      <view class="jh-flex-center padding-r10">
        <view class="font-28 c-000 padding-r10">
          +86
        </view>
        <image style="width: 30rpx;height: 30rpx;display: block;" :src="ossDomain + '/downArrow.png'"></image>
      </view>
      <input class="font-28 c-000" style="height: 100%;width: calc(100% - 100rpx);" placeholder="手机号码" type="number" v-model="mobile" maxlength="11"/>
    </view>
    <view class="login-input jh-align-center jh-space-between">
      <input class="font-28 c-000" style="height: 100%;width: calc(100% - 170rpx);" placeholder="验证码" type="number" v-model="code" maxlength="4"/>
      <view class="login-code jh-align-center font-28" @tap="send">
        {{sendAuthCode ? '获取验证码' : count}}
      </view>
    </view>
    <view class="login-input jh-align-center jh-space-between">
      <input class="font-28 c-000" style="height: 100%;width: 100%;" placeholder="新密码" type="text" v-model="pass" password/>
    </view>
    <view class="login-input jh-align-center jh-space-between">
      <input class="font-28 c-000" style="height: 100%;width: 100%;" placeholder="再次输入密码" type="text" v-model="rePass" password/>
    </view>
    <view class="login-btn c-fff jh-flex-center font-30">
      登陆
    </view>
    <view class="login-tool jh-space-between">
      <view class="font-24 padding-t30 padding-b30 jh-line-height" @tap="toLogin()">
        去登陆
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import {
    genTestUserSig
  } from '@/static/utils/GenerateTestUserSig'
  export default {
    data() {
      return {
        ossDomain: uni.ossDomain,
        mobile: '',
        code: '',
        pass: '',
        rePass: '',
        sendAuthCode: true,
        count: "",
        loading: false,
      }
    },
    computed: {
    },
    onUnload() {
      this.loading = false
    },
    methods: {
      toLogin () {
        uni.navigateBack()
      },
      send () {
        if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(this.mobile)) {
          uni.showToast({
            title: "请输入正确的手机号码"
          })
          return;
        }
        if (!this.sendAuthCode) return;
        uni.showLoading({
          title: '验证码发送中',
          mask: true
        })
        let obj = {
          mobile: this.mobile
        }
        this.$http.send(obj).then(res => {
          uni.hideLoading()
          this.getCode()
        })
      },
      getCode() {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.sendAuthCode = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.sendAuthCode = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      },
      // 点击登录进行初始化
      handleLogin() {
        if (!this.mobile) {
          uni.showToast({
            title: "请输入手机号码"
          })
          return;
        }
        if (!this.code) {
          uni.showToast({
            title: "请输入验证码",
            icon: 'none'
          })
          return;
        }
        if (!this.pwd) {
          uni.showToast({
            title: "请输入新密码",
            icon: 'none'
          })
          return;
        }
        if (this.pwd !== this.rePass) {
          uni.showToast({
            title: "两次密码不一致",
            icon: 'none'
          })
          return;
        }
        let obj = {
          mobile: this.mobile,
          code: this.code,
          pwd: this.pass,
          confirm_pwd: this.rePass
        }
        uni.showLoading({
          mask: true
        })
        this.$http.setForgetpwd(obj).then(res => {
          uni.showToast({
            title: '修改密码成功'
          })
          setTimeout(()=>{
            this.toLogin()
          },2000)
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    background-color: #F7F8F8;
    box-sizing: border-box;
    position: relative;
  }
  .login{
    padding: 0 40rpx;
    &-close{
      width: 34rpx;
      height: 34rpx;
      display: block;
      position: absolute;
      top: 120rpx;
      left: 40rpx;
    }
    &-title{
      padding-top: 200rpx;
      font-size: 53rpx;
      color: #000;
    }
    &-input{
      height: 85rpx;
      border-bottom: 1px solid #E0E1E1;
    }
    &-code{
      color: #00374D;
      height: 100%;
    }
    &-btn{
      width: 100%;
      height: 85rpx;
      background: #8FC31F;
      border-radius: 43rpx;
      margin-top: 85rpx;
    }
    &-tool{
      color: #00374D;
    }
  }
</style>
